<template>
    <el-card shadow="never">
        <template #header>
            <slot name="header"></slot>
        </template>
        <el-row :gutter="16">
            <el-col :span="4">
                <ElAvatar shape="square" :size="140" :src="child.avatar || undefined" />
            </el-col>
            <el-col :span="20">
                <el-descriptions :column="2">
                    <el-descriptions-item>
                        <template #label>
                            <descriptions-item-label label="姓名" icon="ep:user" />
                        </template>
                        {{ child.childName || '空' }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <descriptions-item-label label="性别" icon="fa:mars-double" />
                        </template>
                        <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="child.childSex" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <descriptions-item-label label="生日" icon="fa:birthday-cake" />
                        </template>
                        {{ child.birthday ? formatDate(child.birthday) : '空' }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <descriptions-item-label label="血缘关系" icon="fa:mars-double" />
                        </template>
                        <dict-tag :type="DICT_TYPE.RELATIONSHIP" :value="child.relationship" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <descriptions-item-label label="父亲身高(cm)" icon="ep:user" />
                        </template>
                        {{ child.fatherHeight || '--' }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <descriptions-item-label label="母亲身高(cm)" icon="ep:user" />
                        </template>
                        {{ child.matherHeight || '--' }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <descriptions-item-label label="备注" icon="fa-solid:bookmark" />
                        </template>
                        {{ child.remark || '空' }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as ChildApi from '@/api/member/child'
import { DescriptionsItemLabel } from '@/components/Descriptions/index'

const { child } = defineProps<{ child: ChildApi.ChildVO }>()
</script>
<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
